<template>
  <div class="padded-top">
    <navigation>{{ $t('挖矿') }}</navigation>
    <div v-if="JSON.stringify(overview)!=='{}'" class="total">
      <div class="left">
        <div class="item"><span>{{ overview.coin_symbol }}</span></div>
        <div class="item">{{ $t('累计产出') }}：<span>{{ overview.produced_count | numberFormat() }}</span></div>
      </div>
      <div class="right">
        <div class="item">{{ $t('发行量') }}：<span>{{ overview.totalCount | numberFormat() }}</span></div>
        <div class="item">{{ $t('未产出') }}：<span>{{ overview.left_count | numberFormat() }}</span></div>
      </div>
    </div>
    <div class="route-row">
      <nuxt-link to="/starship/starShop" class="total-btn">{{ $t('挖矿套餐') }}</nuxt-link>
      <nuxt-link to="/starship/profit" class="total-btn">{{ $t('查看收益明细') }}</nuxt-link>
    </div>
    <div v-if="list.length>0" class="list">
      <div v-for="item in list" :key="item.id" class="list-item">
        <div class="bd">
          <img :src="downPath + item.icon" alt="" class="pic">
          <div class="txt">
            <div class="name">{{ $t(item.name) }}</div>
            <p>{{ $t('矿机价值') }}：<span>{{ item.amount | numberFormat(2) }} {{ item.coin_symbol }}</span></p>
            <p>{{ $t('日产量') }}：<span>{{ $t('挖矿') }}{{ item.coin_symbol }}{{ $t('售价') }}×1%÷{{ $t('当日') }}{{ overview.coin_symbol }}{{ $t('价格') }}</span></p>
            <p>{{ $t('购买时间') }}：<span>{{ item.ctime | timeFormat('{y}-{m}-{d}') }}</span></p>
            <p>{{ $t('剩余寿命') }}：<span>{{ item.surplus_period }}{{ $t('天') }}</span></p>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      total: {},
      list: []
    }
  },
  computed: {
    ...mapState({
      downPath: ({ imgBaseUrl }) => imgBaseUrl,
      overview: ({ weath }) => weath.overview
    })
  },
  mounted () {
    this.handerMyWeath()
  },
  methods: {
    ...mapActions({
      myWeath: 'weath/myWeath'
    }),
    handerMyWeath () {
      this.myWeath()
        .then((data) => {
          if (data.data) {
            this.list = data.data
          }
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
    }
  }
}
</script>

<style scoped>
.padded-top {
  padding-top: 90px;
}
.total {
  background-color: #fff;
  border-bottom: 10px solid #f0f3f8;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 2;
}
.total .right {text-align: right;}
.total .item {font-size: 14px;}
.total .item span {color: #00acf4;}
.list {
  height: calc(100vh - 136px);
  overflow-y: auto;
}
.list-item {
  margin-bottom: 15px;
  box-shadow: 0 0 15px -5px rgba(0, 0, 0, .1);
}
.total-btn {
  display: block;
  text-align: center;
  color: #00acf4;
  line-height: 40px;font-size: 14px;
  border-bottom: 1px solid #f6f6f6;
}
.list-item .bd {
  padding: 10px 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.list-item .pic {
  width: 120px;margin-right: 10px;
}
.list-item .txt span {
  font-size: 10px;
  color: #00acf4;
}
.list-item .name {
  font-weight: 500;
  font-size: 16px;margin-bottom: 5px;
}
.route-row {
  display: flex;
}
.route-row .total-btn {
  flex: 1 0 0;
  box-sizing: border-box;
}
.route-row .total-btn:first-child + .total-btn {
  border-left: 1px solid #f6f6f6;
}
.no-data {
  margin-top: 10px;
  text-align: center;
  line-height: 3;
  color: #666666;
  font-size: 14px;
}
</style>
